<template>
  <div class="dashboard-container">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-content">
        <h1>欢迎回来，{{ userStore.userName || 'Admin' }}！</h1>
        <p>今天是 {{ currentDate }}，让我们开始分析用户行为数据吧</p>
      </div>
      <div class="welcome-actions">
        <el-button type="primary" :icon="Plus" @click="handleQuickAction('import')">
          快速导入数据
        </el-button>
        <el-button :icon="TrendCharts" @click="handleQuickAction('analysis')">
          开始分析
        </el-button>
        <el-button :icon="Refresh" @click="refreshAllData" :loading="dashboardLoading || realtimeLoading">
          刷新数据
        </el-button>
      </div>
    </div>

    <!-- 核心指标卡片 -->
    <div class="metrics-section" v-loading="dashboardLoading">
      <el-row :gutter="20">
        <el-col :span="6" v-for="metric in coreMetrics" :key="metric.key">
          <el-card class="metric-card" :class="metric.key" @click="handleMetricClick(metric.key)">
            <div class="metric-content">
              <div class="metric-header">
                <div class="metric-icon">
                  <el-icon :size="32" :color="metric.color">
                    <component :is="metric.icon" />
                  </el-icon>
                </div>
                <div class="metric-trend" :class="metric.trend">
                  <el-icon :size="16">
                    <component :is="metric.trend === 'up' ? 'ArrowUp' : 'ArrowDown'" />
                  </el-icon>
                  <span>{{ metric.trendValue }}</span>
                </div>
              </div>
              <div class="metric-body">
                <h3>{{ metric.title }}</h3>
                <p class="metric-value">{{ metric.value }}</p>
                <span class="metric-desc">{{ metric.description }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 数据概览和图表区域 -->
    <div class="charts-section">
      <el-row :gutter="20">
        <!-- 用户增长趋势 -->
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="chart-header">
                <h3>用户增长趋势</h3>
                <el-select v-model="userGrowthPeriod" size="small" style="width: 120px">
                  <el-option label="最近7天" value="7d" />
                  <el-option label="最近30天" value="30d" />
                  <el-option label="最近90天" value="90d" />
                </el-select>
              </div>
            </template>
            <div class="chart-container" ref="userGrowthChart">
              <LineChart
                :data="userGrowthData"
                :x-axis-data="userGrowthXAxis"
                :loading="userGrowthLoading"
                :show-area="true"
                height="300px"
                @chart-click="handleUserGrowthClick"
              />
            </div>
          </el-card>
        </el-col>

        <!-- 用户活跃度分布 -->
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="chart-header">
                <h3>用户活跃度分布</h3>
                <el-button-group size="small">
                  <el-button :type="activityType === 'daily' ? 'primary' : ''" @click="activityType = 'daily'">日活</el-button>
                  <el-button :type="activityType === 'weekly' ? 'primary' : ''" @click="activityType = 'weekly'">周活</el-button>
                  <el-button :type="activityType === 'monthly' ? 'primary' : ''" @click="activityType = 'monthly'">月活</el-button>
                </el-button-group>
              </div>
            </template>
            <div class="chart-container" ref="activityChart">
              <PieChartComponent
                :data="activityData"
                :loading="activityLoading"
                height="300px"
                :radius="['30%', '60%']"
                @chart-click="handleActivityClick"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 实时数据和快捷操作 -->
    <div class="bottom-section">
      <el-row :gutter="20">
        <!-- 实时数据流 -->
        <el-col :span="16">
          <el-card class="realtime-card" v-loading="realtimeLoading">
            <template #header>
              <div class="card-header">
                <h3>实时数据流</h3>
                <el-tag :type="realtimeStatus === 'active' ? 'success' : 'info'" size="small">
                  {{ realtimeStatus === 'active' ? '实时更新' : '已暂停' }}
                </el-tag>
              </div>
            </template>
            <div class="realtime-content">
              <div class="realtime-left">
                <div class="realtime-metrics">
                  <div class="realtime-item" v-for="item in realtimeData" :key="item.key">
                    <span class="realtime-label">{{ item.label }}</span>
                    <span class="realtime-value" :style="{ color: item.color }">{{ item.value }}</span>
                  </div>
                </div>

                <!-- 数据统计摘要 -->
                <div class="realtime-summary">
                  <h4>今日数据摘要</h4>
                  <div class="summary-grid">
                    <div class="summary-item" v-for="summary in todaySummary" :key="summary.key">
                      <div class="summary-icon">
                        <el-icon :size="16" :color="summary.color">
                          <component :is="summary.icon" />
                        </el-icon>
                      </div>
                      <div class="summary-content">
                        <span class="summary-label">{{ summary.label }}</span>
                        <span class="summary-value">{{ summary.value }}</span>
                        <span class="summary-change" :class="summary.trend">{{ summary.change }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="realtime-chart" ref="realtimeChart">
                <RealtimeChart
                  :data="realtimeChartData"
                  :auto-update="realtimeStatus === 'active'"
                  :update-interval="3000"
                  height="250px"
                  @data-update="handleRealtimeUpdate"
                />
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 快捷操作面板 -->
        <el-col :span="8">
          <el-card class="quick-actions-card">
            <template #header>
              <h3>快捷操作</h3>
            </template>
            <div class="quick-actions">
              <div class="action-item" v-for="action in quickActions" :key="action.key" @click="handleQuickAction(action.key)">
                <div class="action-icon">
                  <el-icon :size="24" :color="action.color">
                    <component :is="action.icon" />
                  </el-icon>
                </div>
                <div class="action-content">
                  <h4>{{ action.title }}</h4>
                  <p>{{ action.description }}</p>
                </div>
                <div class="action-arrow">
                  <el-icon><ArrowRight /></el-icon>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 系统状态栏 -->
    <div class="status-bar">
      <div class="status-item">
        <el-icon color="#67C23A"><CircleCheckFilled /></el-icon>
        <span>系统运行正常</span>
      </div>
      <div class="status-item">
        <el-icon color="#409EFF"><Clock /></el-icon>
        <span>最后更新: {{ lastUpdateTime }}</span>
      </div>
      <div class="status-item">
        <el-icon color="#E6A23C"><Warning /></el-icon>
        <span>{{ pendingTasks }} 个待处理任务</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  User, TrendCharts, Money, DataAnalysis, Plus, ArrowUp, ArrowDown,
  PieChart, Monitor, Upload, Grid, MagicStick, Star, ArrowRight,
  CircleCheckFilled, Clock, Warning, Timer, Refresh
} from '@element-plus/icons-vue'
import { useUserStore } from '@/store/user'
import { LineChart, PieChart as PieChartComponent, RealtimeChart } from '@/components/charts'
import {
  getDashboardOverview,
  getRealtimeData,
  getUserGrowthData,
  getUserActivityData
} from '@/api/dashboard'

const router = useRouter()
const userStore = useUserStore()

// 响应式数据
const userGrowthPeriod = ref('30d')
const activityType = ref('daily')
const realtimeStatus = ref('active')
const pendingTasks = ref(3)

// 图表加载状态
const userGrowthLoading = ref(false)
const activityLoading = ref(false)
const dashboardLoading = ref(false)
const realtimeLoading = ref(false)

// 当前日期
const currentDate = computed(() => {
  return new Date().toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
})

// 最后更新时间
const lastUpdateTime = ref('')

// 核心指标数据
const coreMetrics = ref([
  {
    key: 'users',
    title: '总用户数',
    value: '12,345',
    description: '较昨日 +156',
    icon: 'User',
    color: '#409EFF',
    trend: 'up',
    trendValue: '+12.5%'
  },
  {
    key: 'active',
    title: '活跃用户',
    value: '8,567',
    description: '7日活跃用户',
    icon: 'TrendCharts',
    color: '#67C23A',
    trend: 'up',
    trendValue: '+8.3%'
  },
  {
    key: 'revenue',
    title: '总销售额',
    value: '¥2.58M',
    description: '本月累计收入',
    icon: 'Money',
    color: '#E6A23C',
    trend: 'up',
    trendValue: '+15.2%'
  },
  {
    key: 'conversion',
    title: '转化率',
    value: '12.8%',
    description: '较上月 -0.3%',
    icon: 'DataAnalysis',
    color: '#F56C6C',
    trend: 'down',
    trendValue: '-2.3%'
  }
])

// 实时数据
const realtimeData = ref([
  { key: 'online', label: '在线用户', value: '1,234', color: '#67C23A' },
  { key: 'pv', label: '页面浏览', value: '45,678', color: '#409EFF' },
  { key: 'orders', label: '实时订单', value: '89', color: '#E6A23C' },
  { key: 'revenue', label: '实时收入', value: '¥12,345', color: '#F56C6C' }
])

// 快捷操作
const quickActions = ref([
  {
    key: 'import',
    title: '数据导入',
    description: '导入用户行为数据',
    icon: 'Upload',
    color: '#409EFF'
  },
  {
    key: 'analysis',
    title: '用户分析',
    description: '查看用户画像分析',
    icon: 'User',
    color: '#67C23A'
  },
  {
    key: 'segmentation',
    title: '用户分群',
    description: '执行用户分群算法',
    icon: 'Grid',
    color: '#E6A23C'
  },
  {
    key: 'prediction',
    title: '预测分析',
    description: '用户流失预测',
    icon: 'MagicStick',
    color: '#F56C6C'
  },
  {
    key: 'recommendation',
    title: '推荐系统',
    description: '个性化推荐配置',
    icon: 'Star',
    color: '#9C27B0'
  }
])

// 用户增长趋势数据
const userGrowthData = computed(() => {
  const periods = {
    '7d': 7,
    '30d': 30,
    '90d': 90
  }
  const days = periods[userGrowthPeriod.value] || 30

  return [
    {
      name: '新增用户',
      data: generateTrendData(days, 50, 200)
    },
    {
      name: '活跃用户',
      data: generateTrendData(days, 300, 800)
    }
  ]
})

const userGrowthXAxis = computed(() => {
  const periods = {
    '7d': 7,
    '30d': 30,
    '90d': 90
  }
  const days = periods[userGrowthPeriod.value] || 30
  const dates = []

  for (let i = days - 1; i >= 0; i--) {
    const date = new Date()
    date.setDate(date.getDate() - i)
    dates.push(date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }))
  }

  return dates
})

// 用户活跃度分布数据
const activityData = computed(() => {
  const dataMap = {
    daily: [
      { name: '高活跃', value: 3245 },
      { name: '中活跃', value: 2156 },
      { name: '低活跃', value: 1876 },
      { name: '沉睡', value: 1290 }
    ],
    weekly: [
      { name: '高活跃', value: 2890 },
      { name: '中活跃', value: 3456 },
      { name: '低活跃', value: 2234 },
      { name: '沉睡', value: 1987 }
    ],
    monthly: [
      { name: '高活跃', value: 4567 },
      { name: '中活跃', value: 3234 },
      { name: '低活跃', value: 2890 },
      { name: '沉睡', value: 2456 }
    ]
  }

  return dataMap[activityType.value] || dataMap.daily
})

// 实时图表数据
const realtimeChartData = ref([
  { name: '在线用户', baseValue: 1200 },
  { name: '页面浏览', baseValue: 3500 },
  { name: '实时订单', baseValue: 85 }
])

// 今日数据摘要
const todaySummary = ref([
  {
    key: 'peak_users',
    label: '峰值用户',
    value: '2,456',
    change: '+18.5%',
    trend: 'up',
    icon: 'User',
    color: '#409EFF'
  },
  {
    key: 'avg_session',
    label: '平均会话',
    value: '8.5分钟',
    change: '+2.3%',
    trend: 'up',
    icon: 'Timer',
    color: '#67C23A'
  },
  {
    key: 'bounce_rate',
    label: '跳出率',
    value: '32.1%',
    change: '-5.2%',
    trend: 'down',
    icon: 'Warning',
    color: '#E6A23C'
  },
  {
    key: 'conversion',
    label: '转化率',
    value: '4.8%',
    change: '+0.8%',
    trend: 'up',
    icon: 'TrendCharts',
    color: '#F56C6C'
  }
])

// 生成趋势数据的辅助函数
const generateTrendData = (days, min, max) => {
  const data = []
  let current = min + Math.random() * (max - min)

  for (let i = 0; i < days; i++) {
    const variation = (Math.random() - 0.5) * (max - min) * 0.1
    current = Math.max(min, Math.min(max, current + variation))
    data.push(Math.round(current))
  }

  return data
}

// 处理指标卡片点击
const handleMetricClick = (metricKey) => {
  switch (metricKey) {
    case 'users':
      router.push('/analysis/profile/basic')
      break
    case 'active':
      router.push('/analysis/profile/behavior')
      break
    case 'revenue':
      router.push('/analysis/profile/consumption')
      break
    case 'conversion':
      router.push('/analysis/segmentation')
      break
    default:
      ElMessage.info('功能开发中...')
  }
}

// 处理快捷操作
const handleQuickAction = (actionKey) => {
  switch (actionKey) {
    case 'import':
      router.push('/data/import')
      break
    case 'analysis':
      router.push('/analysis/profile/basic')
      break
    case 'segmentation':
      router.push('/analysis/segmentation')
      break
    case 'prediction':
      router.push('/prediction/churn')
      break
    case 'recommendation':
      router.push('/recommendation')
      break
    default:
      ElMessage.info('功能开发中...')
  }
}

// 图表事件处理
const handleUserGrowthClick = (params) => {
  ElMessage.info(`点击了用户增长数据: ${params.seriesName} - ${params.name}: ${params.value}`)
}

const handleActivityClick = (params) => {
  ElMessage.info(`点击了活跃度数据: ${params.name} - ${params.value}`)
}

const handleRealtimeUpdate = (data) => {
  // 实时数据更新时的处理逻辑
  console.log('实时数据更新:', data)
}

// 更新时间
const updateTime = () => {
  lastUpdateTime.value = new Date().toLocaleTimeString('zh-CN')
}

// 模拟实时数据更新
const updateRealtimeData = () => {
  if (realtimeStatus.value === 'active') {
    realtimeData.value.forEach(item => {
      const baseValue = parseInt(item.value.replace(/[^\d]/g, ''))
      const variation = Math.floor(Math.random() * 20) - 10
      const newValue = Math.max(0, baseValue + variation)

      if (item.key === 'revenue') {
        item.value = `¥${newValue.toLocaleString()}`
      } else {
        item.value = newValue.toLocaleString()
      }
    })
  }
}

// API调用方法
const loadDashboardData = async () => {
  try {
    dashboardLoading.value = true
    const response = await getDashboardOverview()
    if (response.success) {
      coreMetrics.value = response.data.core_metrics
      lastUpdateTime.value = new Date(response.data.last_update).toLocaleTimeString('zh-CN')
    }
  } catch (error) {
    console.error('加载仪表盘数据失败:', error)
    ElMessage.error('加载仪表盘数据失败')
  } finally {
    dashboardLoading.value = false
  }
}

const loadRealtimeData = async () => {
  try {
    realtimeLoading.value = true
    const response = await getRealtimeData()
    if (response.success) {
      realtimeData.value = response.data.realtime_data
    }
  } catch (error) {
    console.error('加载实时数据失败:', error)
  } finally {
    realtimeLoading.value = false
  }
}

const loadUserGrowthData = async (period) => {
  try {
    userGrowthLoading.value = true
    const response = await getUserGrowthData(period)
    if (response.success) {
      // 处理用户增长数据
      console.log('用户增长数据:', response.data)
    }
  } catch (error) {
    console.error('加载用户增长数据失败:', error)
  } finally {
    userGrowthLoading.value = false
  }
}

const loadUserActivityData = async (type) => {
  try {
    activityLoading.value = true
    const response = await getUserActivityData(type)
    if (response.success) {
      // 处理用户活跃度数据
      console.log('用户活跃度数据:', response.data)
    }
  } catch (error) {
    console.error('加载用户活跃度数据失败:', error)
  } finally {
    activityLoading.value = false
  }
}

// 刷新所有数据
const refreshAllData = async () => {
  await Promise.all([
    loadDashboardData(),
    loadRealtimeData(),
    loadUserGrowthData(userGrowthPeriod.value),
    loadUserActivityData(activityType.value)
  ])
  ElMessage.success('数据刷新成功')
}

// 定时器
let timeInterval = null
let dataInterval = null

onMounted(async () => {
  // 初始化加载数据
  await loadDashboardData()
  await loadRealtimeData()
  await loadUserGrowthData(userGrowthPeriod.value)
  await loadUserActivityData(activityType.value)

  updateTime()
  timeInterval = setInterval(updateTime, 1000)
  dataInterval = setInterval(() => {
    loadRealtimeData()
    updateRealtimeData()
  }, 30000) // 30秒更新一次实时数据
})

onUnmounted(() => {
  if (timeInterval) clearInterval(timeInterval)
  if (dataInterval) clearInterval(dataInterval)
})
</script>

<style scoped>
.dashboard-container {
  padding: 0;
  background-color: transparent;
}

/* 欢迎区域 */
.welcome-section {
  background: #3949ab;
  color: #ffffff;
  padding: 30px;
  border-radius: 16px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(57, 73, 171, 0.3), 0 0 60px rgba(57, 73, 171, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.welcome-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(2px 2px at 20px 30px, #fff, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 200px 60px, #fff, transparent),
    radial-gradient(1px 1px at 240px 20px, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 280px 90px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 320px 50px, rgba(255,255,255,0.5), transparent),
    radial-gradient(2px 2px at 360px 10px, rgba(255,255,255,0.9), transparent);
  background-repeat: repeat;
  background-size: 400px 120px;
  opacity: 0.6;
  animation: starfield 20s linear infinite, twinkle 3s ease-in-out infinite alternate;
  pointer-events: none;
}

.welcome-content h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 700;
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.welcome-content p {
  margin: 0;
  font-size: 16px;
  color: #e8eaf6 !important;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.welcome-actions {
  display: flex;
  gap: 12px;
}

.welcome-actions .el-button {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  backdrop-filter: blur(10px);
}

.welcome-actions .el-button:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

.welcome-actions .el-button--primary {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

/* 指标卡片区域 */
.metrics-section {
  margin-bottom: 24px;
}

.metric-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #409EFF, #67C23A);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.metric-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.metric-card:hover::before {
  opacity: 1;
}

.metric-card.users::before {
  background: linear-gradient(90deg, #409EFF, #5dade2);
}

.metric-card.active::before {
  background: linear-gradient(90deg, #67C23A, #58d68d);
}

.metric-card.revenue::before {
  background: linear-gradient(90deg, #E6A23C, #f7dc6f);
}

.metric-card.conversion::before {
  background: linear-gradient(90deg, #F56C6C, #ec7063);
}

.metric-content {
  padding: 24px;
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.metric-icon {
  padding: 12px;
  border-radius: 12px;
  background: rgba(64, 158, 255, 0.1);
}

.metric-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.metric-trend.up {
  background: rgba(103, 194, 58, 0.1);
  color: #67C23A;
}

.metric-trend.down {
  background: rgba(245, 108, 108, 0.1);
  color: #F56C6C;
}

.metric-body h3 {
  margin: 0 0 8px 0;
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

.metric-value {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

.metric-desc {
  color: #999;
  font-size: 12px;
}

/* 图表区域 */
.charts-section {
  margin-bottom: 24px;
}

.chart-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-placeholder {
  text-align: center;
  color: #999;
}

.chart-placeholder p {
  margin: 8px 0 0 0;
  font-size: 14px;
}

/* 底部区域 */
.bottom-section {
  margin-bottom: 24px;
}

.bottom-section .el-row {
  align-items: stretch;
}

.bottom-section .el-col {
  display: flex;
}

.bottom-section .el-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.realtime-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.realtime-card .el-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.realtime-content {
  display: flex;
  gap: 24px;
  flex: 1;
  min-height: 0;
}

.realtime-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.realtime-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-content: start;
}

.realtime-item {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  min-height: 80px;
  justify-content: center;
}

.realtime-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  font-weight: 500;
}

.realtime-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

/* 数据摘要 */
.realtime-summary {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 16px;
}

.realtime-summary h4 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.summary-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: white;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.summary-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.summary-icon {
  padding: 8px;
  border-radius: 6px;
  background: rgba(64, 158, 255, 0.1);
}

.summary-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.summary-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.summary-value {
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.summary-change {
  font-size: 11px;
  font-weight: 500;
}

.summary-change.up {
  color: #67C23A;
}

.summary-change.down {
  color: #F56C6C;
}

.realtime-chart {
  flex: 1;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 12px;
}

/* 快捷操作 */
.quick-actions-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.quick-actions-card .el-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.action-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  background: #f8f9fa;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-item:hover {
  background: #e9ecef;
  transform: translateX(4px);
}

.action-icon {
  margin-right: 12px;
  padding: 8px;
  border-radius: 8px;
  background: white;
}

.action-content {
  flex: 1;
}

.action-content h4 {
  margin: 0 0 4px 0;
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

.action-content p {
  margin: 0;
  color: #666;
  font-size: 12px;
}

.action-arrow {
  color: #999;
}

/* 状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .realtime-content {
    flex-direction: column;
  }

  .realtime-metrics {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .welcome-section {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .welcome-content h1 {
    font-size: 24px;
  }

  .welcome-actions {
    justify-content: center;
  }

  .realtime-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .status-bar {
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .welcome-section {
    padding: 20px;
  }

  .metric-content {
    padding: 16px;
  }

  .metric-value {
    font-size: 24px;
  }

  .realtime-metrics {
    grid-template-columns: 1fr;
  }

  .action-item {
    padding: 12px;
  }
}

/* 星空动画 */
@keyframes starfield {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-400px);
  }
}

@keyframes twinkle {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
</style>
